<style lang="scss">
.layout-cell {
  display: flex;
  font-size: 28upx;
  line-height: 1;
  justify-content: space-between;
  .layout-cell_title {
    flex: 0 0 164upx;
    color: $f606266;
  }
  .layout-cell_message {
    word-break: break-all;
    &--strong {
      color: $f303133;
    }
    &--general {
      color: $f606266;
    }
  }
}
</style>

<template>
  <view class="layout-cell" :style="style">
    <view class="layout-cell_title" v-if="title" :style="leftWidthStyle">
      {{ title }}
    </view>
    <view
      class="layout-cell_message"
      :class="'layout-cell_message--' + messageColor"
      :style="isRight"
    >
      <slot></slot>
    </view>
  </view>
</template>
<script lang="ts">
import Vue, { PropType } from "vue";
import { Component, Prop } from "vue-property-decorator";

type TDirection = "right";
type TMessage = "strong" | "general";

@Component({})
export default class Index extends Vue {
  @Prop({ type: String, default: "" }) title;
  @Prop({ type: String as PropType<TDirection> }) direction;
  @Prop({ type: Number, default: 32 }) topGap;
  @Prop({ type: Number, default: 1 }) lineHeight;
  @Prop({ type: Number, default: 164 }) leftWidth;
  @Prop({ type: String as PropType<TMessage>, default: "strong" }) messageColor;
  get style() {
    return this.marginTop + this.isLineHeight;
  }

  get leftWidthStyle() {
    return `flex: 0 0 ${uni.upx2px(this.leftWidth)}px`;
  }
  get marginTop() {
    return `margin-top: ${uni.upx2px(this.topGap)}px;`;
  }
  get isLineHeight() {
    if (this.lineHeight === 1) return "";

    return `line-height:${uni.upx2px(this.lineHeight)}px;`;
  }
  get isRight() {
    return this.direction ? "" : "flex: 1";
  }
}
</script>
